import { Tabs } from '@aws-amplify/ui-react';
import QuickStartPullWeb from './quick-start-pull.web.mdx';
import QuickStartInstallWeb from './quick-start-install.web.mdx';
import QuickStartAddWeb from './quick-start-add.web.mdx';
import TroubleshootingWeb from './trouble-shooting-alert.web.mdx';
import VitePolyfill from '../../getting-started/troubleshooting/shared/vite-polyfill.mdx';
import VitePolyfillTS from '../../getting-started/troubleshooting/shared/vite-polyfill-ts.mdx';

#### Step 1. Configure backend

<QuickStartPullWeb />

#### Step 2. Install dependencies

<QuickStartInstallWeb />

#### Step 3. Update Vite config and index.html

When working with Vite in a Vue project, you must make a few modifications. Please follow the steps below.

<Tabs.Container defaultValue="typescript">
  <Tabs.List>
    <Tabs.Item value="typescript">TypeScript</Tabs.Item>
    <Tabs.Item value="javascript">Javascript</Tabs.Item>
  </Tabs.List>
  <Tabs.Panel value="typescript">
    <VitePolyfillTS />
  </Tabs.Panel>
  <Tabs.Panel value="javascript">
    <VitePolyfill />
    </Tabs.Panel>
</Tabs.Container>

#### Step 4. Add the Authenticator

<QuickStartAddWeb />

<TroubleshootingWeb />
